<div>
    <p class="basicInfo">
        预览设备
    </p>
    <el-tabs v-model="previewActiveName" style="padding-left: 20px;margin-top: 0!important;">
        <el-tab-pane label="预览参数" name="previewParam">
            <el-row style="padding-left: 0!important;">
                <div class="width100 d-flex a-center">
                    <el-form-item label="预览质量:" prop="imgQuality" class="width25">
                        <el-input type="number" v-model="devicePreviewParam.imgQuality" placeholder=""
                                  oninput="if(value.length>10)value=value.slice(0,10)" min="0" max="100"
                                  @change="autoDevicePreview" class="width100">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="缩放倍数:" prop="scale" class="width25">
                        <el-input type="number" v-model="devicePreviewParam.imgScale" placeholder=""
                                  oninput="if(value.length>10)value=value.slice(0,10)" min="0" step="0.1"
                                  max="1" @change="autoDevicePreview" class="width100">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="预览高度:" prop="scale" class="width25">
                        <el-input type="number" v-model="devicePreviewParam.previewHeight" placeholder=""
                                  min="0" max="5000" @change="autoDevicePreview" class="width100">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="预览阈值:" prop="scale" class="width25">
                        <el-input type="number" v-model="devicePreviewParam.imgThreshold" placeholder=""
                                  oninput="if(value.length>10)value=value.slice(0,10)" min="0" max="255"
                                  @change="autoDevicePreview" class="width100">
                        </el-input>
                    </el-form-item>
                </div>
            </el-row>
            <el-row style="padding-left: 0!important;">
                <div class="width100 d-flex a-center">
                    <el-form-item label="APP刷新:" prop="appSpace" class="width25">
                        <el-input type="number" v-model="devicePreviewParam.appSpace" placeholder=""
                                  oninput="if(value.length>10)value=value.slice(0,10)" min="10" step="10"
                                  max="5000" @change="autoDevicePreview" class="width100">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="浏览器刷新:" prop="clientSpace" class="width25">
                        <el-input type="number" v-model="devicePreviewParam.clientSpace" placeholder=""
                                  oninput="if(value.length>10)value=value.slice(0,10)" min="10" step="10"
                                  max="5000" @change="autoDevicePreview" class="width100">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="操作记录:" prop="clientSpace" class="width50">
                        <el-input type="textarea" v-model="devicePreviewParam.operateRecord" placeholder=""
                                  class="width100">
                        </el-input>
                    </el-form-item>
                </div>
            </el-row>
        </el-tab-pane>
        <el-tab-pane label="通知监听" name="noticeMessage">
            <el-row style="padding-left: 0!important;">
                <div class="width100 d-flex a-center" style="margin-bottom: 5px;">
                    <div>通知监听规则名称</div>
                    <div style="display: inline-flex;justify-content: flex-end;align-items: center;margin-left:10px; width: 200px; ">
                        <el-input placeholder="通知规则名称" v-model="noticeListenerName" class="flex-1"/>
                    </div>
                    <el-button type="primary" size="mini" style="margin-left: 10px !important;"
                               @click.stop.prevent="saveToDraft">
                        存为草稿
                    </el-button>
                    <el-button type="primary" size="mini" style="margin-left: 10px !important;"
                               @click.stop.prevent="readForDraft">
                        从草稿读取
                    </el-button>
                    <el-button type="primary" size="mini" style="margin-left: 10px !important;"
                               @click.stop.prevent="saveToFile">
                        存为文件
                    </el-button>
                    <el-button type="primary" size="mini" style="margin-left: 10px !important;"
                               @click.stop.prevent="readForFile">
                        从文件读取
                    </el-button>
                    <div style="display: inline-flex;justify-content: flex-end;align-items: center;margin-left:10px; ">
                        <span>是否开启通知监听：</span>
                        <el-switch v-model="openNoticeMessageListenerFlag" :disabled="!allowOpenNoticeListener" @change="openNoticeMessageListenerChange"/>
                    </div>
                </div>
                <div class="width100 d-flex a-center">
                    <el-table :data="noticeListenerRules"  border ref="noticeListenerRulesTable"                              highlight-current-row style="width: 100%">
                        <el-table-column prop="matchingPackageName" align="left" label="匹配包名">
                            <template slot-scope="{ row, $index}">
                                <el-input type="textarea" v-model="row.matchingPackageName" :rows="3"  placeholder="请输入匹配包名" class="width100">
                                </el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="matchingText" label="匹配文本" align="left">
                            <template slot-scope="{ row, $index}">
                                <el-input type="textarea" v-model="row.matchingText" :rows="3"  placeholder="请输入匹配文本" class="width100">
                                </el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="autoClick" label="自动点击" align="left">
                            <template slot-scope="{ row, $index}">
                                <el-switch v-model="row.autoClick"/>
                            </template>
                        </el-table-column>
                        <el-table-column prop="receiveEmail" label="邮件地址" align="left">
                            <template slot-scope="{ row, $index}">
                                <el-input type="textarea" v-model="row.receiveEmail" :rows="3"  placeholder="请输入邮件地址,为空则不推送" class="width100">
                                </el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="executeScript" label="执行代码" align="left">
                            <template slot-scope="{ row, $index}">
                                <el-input type="textarea" v-model="row.executeScript" :rows="3" placeholder="请填写执行代码"
                                          class="width100">
                                </el-input>
                            </template>
                        </el-table-column>
                        <el-table-column width="100">
                            <template slot="header">
                                <div class="d-flex a-center">
                                    操作
                                    <i class="el-icon-circle-plus" style="font-size: 18px;margin-left: 5px;" @click.stop="tableAddRow('noticeListenerRules',-1)"/>
                                </div>
                            </template>
                            <template slot-scope="{ row, $index }">
                                <div class="d-flex j-start a-center">
                                    <i class="el-icon-circle-plus" style="font-size: 18px;margin-right: 5px;" @click.stop="tableAddRow('noticeListenerRules',$index)"/>
                                    <i class="el-icon-remove" style="font-size: 18px;color: #E0E0E0;" @click.stop="tableDeleteRow('noticeListenerRules',$index)"/>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-row>
            <el-row style="padding-left: 0!important;;margin-top:10px;">
                <div class="width100 d-flex a-center" style="margin-bottom: 5px;">
                    <div>历史通知</div>
                    <el-button type="primary" size="mini" style="margin-left: 10px !important;"
                               @click.stop.prevent="queryNoticeMessage">
                        查询通知
                    </el-button>
                    <el-button type="primary" size="mini" style="margin-left: 10px !important;"
                               @click.stop.prevent="clearNoticeMessage">
                        清理通知
                    </el-button>
                </div>
                <el-table :data="historyNoticeMessageList"  border ref="historyNoticeMessageListTable"
                          highlight-current-row style="width: 100%">
                    <el-table-column prop="应用包名" align="left" label="应用包名" width="200">
                    </el-table-column>
                    <el-table-column prop="通知文本" label="通知文本" align="left">
                    </el-table-column>
                    <el-table-column prop="通知数" label="通知数" align="left" width="100">
                    </el-table-column>
                    <el-table-column prop="通知摘要" label="通知摘要" align="left">
                    </el-table-column>
                    <el-table-column prop="通知时间" label="通知时间" align="left" width="300">
                    </el-table-column>
                </el-table>
            </el-row>
        </el-tab-pane>
        <el-tab-pane label="脚本管理" name="scriptManage">
            <el-row style="padding-left: 0!important;">
                <div class="width100 d-flex a-center" style="margin-bottom: 5px;">
                    <el-button type="primary" size="mini" style="margin-left: 10px !important;"
                               @click.stop.prevent="queryScript">
                        查询脚本
                    </el-button>
                </div>
                <el-table :data="scriptArr" v-loading="scriptLoading" border ref="scriptArrTable"
                          highlight-current-row style="width: 100%">
                    <el-table-column prop="id" align="left" label="脚本id" width="200">
                    </el-table-column>
                    <el-table-column prop="source" label="脚本路径" align="left">
                    </el-table-column>
                    <el-table-column prop="cwd" label="脚本目录" align="left">
                    </el-table-column>
                    <el-table-column width="100">
                        <template slot="header">
                            <div class="d-flex a-center">
                                操作
                            </div>
                        </template>
                        <template slot-scope="{ row, $index }">
                            <div class="d-flex j-start a-center">
                                <el-link :underline="false" type="primary" @click="stopScript(row)">停止脚本</el-link>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
        </el-tab-pane>
        <el-tab-pane label="定时任务" name="timerTask">
            <el-row style="padding-left: 0!important;">
                <div class="width100 d-flex a-center" style="margin-bottom: 5px;">
                    <el-button type="primary" size="mini" style="margin-left: 10px !important;"
                               @click.stop.prevent="queryTimerTask">
                        查询定时任务
                    </el-button>
                </div>
                <el-table :data="timerTaskArr" v-loading="timerTaskLoading" border ref="scriptArrTable"
                          highlight-current-row style="width: 100%">
                    <el-table-column prop="id" align="left" label="任务id" width="100px">
                    </el-table-column>
                    <el-table-column prop="taskType" label="任务类型" align="left"  width="150px">
                    </el-table-column>
                    <el-table-column prop="scriptPath" label="脚本路径" align="left" width="300px">
                    </el-table-column>
                    <el-table-column prop="timerParamJson" label="任务参数" align="left">
                    </el-table-column>
                    <el-table-column width="100px">
                        <template slot="header">
                            <div class="d-flex a-center">
                                操作
                            </div>
                        </template>
                        <template slot-scope="{ row, $index }">
                            <div class="d-flex j-start a-center">
                                <el-link :underline="false" type="primary" @click="stopTimerTask(row)">停止任务</el-link>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
            <!--



            任务参数
                延迟毫秒
                间隔毫秒
                循环次数
            action
            category
            dataType
            local

            操作
            -->
        </el-tab-pane>
    </el-tabs>
    <el-row style="margin-top:10px;">
        <div class="width100 d-flex a-center">
            <el-form-item label="文本传输内容:" prop="textContent" class="width50">
                <el-input type="textarea" v-model="textContent" placeholder=""
                          class="width100">
                </el-input>
            </el-form-item>
            <el-form-item label="文本框序号:" prop="textIndex" class="width25">
                <el-input type="number" v-model="textIndex" placeholder=""
                          oninput="if(value.length>10)value=value.slice(0,10)" step="1"
                          max="5000" class="width100">
                </el-input>
            </el-form-item>
            <el-form-item label="传输类型:" prop="textType" class="width25">
                <el-radio-group v-model="textType">
                    <el-radio label="text">
                        覆盖
                    </el-radio>
                    <el-radio label="input">
                        追加
                    </el-radio>
                </el-radio-group>
            </el-form-item>
        </div>
    </el-row>
    <el-row>
        <div class="width100 d-flex a-center">
            <el-form-item label="设备预览:" prop="previewImg" class="width100">
                <div>
                    x:{{deviceMousePosition.x }} y:{{deviceMousePosition.y}}
                </div>
                <div style="display: flex;justify-content: flex-end;align-items: center;text-align: center;width: 100%">
                    <el-button type="danger" size="mini" style="margin-left:10px" @click.stop.prevent="sendTextContent">
                        发送文本
                    </el-button>
                    <el-button type="danger" size="mini" style="margin-left:10px" @click.stop.prevent="fixedOperate('home')">
                        主页
                    </el-button>
                    <el-button type="danger" size="mini" style="margin-left:10px" @click.stop.prevent="fixedOperate('back')">
                        返回
                    </el-button>
                    <el-button type="danger" size="mini" style="margin-left:10px" @click.stop.prevent="fixedOperate('recents')">
                        任务
                    </el-button>
                    <el-button type="danger" size="mini" style="margin-left:10px" @click.stop.prevent="fixedOperate('quickSettings')">
                        通知
                    </el-button>
                    <el-button type="danger" size="mini" style="margin-left:10px" @click.stop.prevent="fixedOperate('powerDialog')">
                        电源
                    </el-button>
                    <el-button type="primary" size="mini" style="margin-left:10px" @click.stop.prevent="devicePreviewParam.operateRecord = ''">
                        清空操作记录
                    </el-button>
                </div>
                <div style="display: flex;justify-content: flex-end;align-items: center;text-align: center;width: 100%">
                    <div style="display: inline-flex;justify-content: flex-end;align-items: center;margin-left:10px;">
                        <span>
                            开启灰度化：
                        </span>
                        <el-switch v-model="devicePreviewParam.isOpenGray" @change="autoDevicePreview"
                        />
                    </div>
                    <div style="display: inline-flex;justify-content: flex-end;align-items: center;margin-left:10px;">
                        <span>
                            开启阈值化：
                        </span>
                        <el-switch v-model="devicePreviewParam.isOpenThreshold" @change="autoDevicePreview"
                        />
                    </div>
                    <div style="display: inline-flex;justify-content: flex-end;align-items: center;margin-left:10px;">
                        <span>
                            参数变化后自动预览：
                        </span>
                        <el-switch v-model="devicePreviewParam.valueUpdateAfterAutoPreview" />
                    </div>
                    <el-button type="danger" size="mini" style="margin-left:10px" id="loadPreviewImg"
                               @click.stop.prevent="startPreviewDevice(true)">
                        开始预览
                    </el-button>
                    <el-button type="danger" size="mini" style="margin-left:10px" @click.stop.prevent="stopPreviewDevice(true)">
                        停止预览
                    </el-button>
                </div>
                <div style="min-height: 40vh;width: 100%;display: flex;justify-content: center;align-items: center;text-align: center;">
                    <div style="font-size: 20px;color: rgba(29,140,128,0.29)">
                        <img id="devicePreviewImg" draggable="false" style="width: auto;margin: 0; padding: 0;height: 500px;max-width: 100%;"
                        />
                    </div>
                </div>
            </el-form-item>
        </div>
    </el-row>
</div>